<template>
  <div class="form-view-row form-service-provider-view">
    <label>{{ field.displayName }}</label>
    <div class="form-view-row-content">
      <!-- start 子表单表格 -->
      <el-table
        v-if="columns.length"
        :data="subformFieldsValues"
        header-row-class-name="common-list-table-header__v2"
        border
      >
        <el-table-column type="index" width="50" :label="$t('common.base.SN')" />
        <el-table-column
          v-for="(column, index) in columns"
          :key="`${column.field}_${index}`"
          :label="column.label"
          :prop="column.field"
          :width="column.width"
          :min-width="column.minWidth || '120px'"
          :show-overflow-tooltip="column.field !== 'name'"
          :align="column.align"
        >
          <template slot-scope="scope">
            <template>
              {{
                $formatFormField(column, scope.row)
              }}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <!-- end 子表单表格 -->
    </div>
  </div>
</template>

<script>
import { formatAddress } from 'pub-bbx-utils';
export default {
  name: 'form-service-provider-view',
  props: {
    field: {
      type: Object,
      default: () => ({}),
    },
    value: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    columns() {
      let tableColumns = this.field?.subFormFieldList || [];

      tableColumns.map(field => {
        field.label = field.displayName;
        field.field = field.fieldName;
      });
      return tableColumns;
    },
    subformFieldsValues() {
      return (this.value || []).map(item => {
        return {
          ...item,
          ...item.attribute
        };
      });
    },
  },
  methods: {
    // 特殊数据处理
    getAddress(fieldVal) {
      return formatAddress(fieldVal);
    },
    getCascader(fieldVal) {
      return Array.isArray(fieldVal) ? fieldVal.join('/') : fieldVal || '';
    },
    getUser(fieldVal) {
      return Array.isArray(fieldVal)
        ? fieldVal.map(v => v.displayName).join(',')
        : fieldVal?.displayName || '';
    },
  },
};
</script>
<style lang="scss" scoped>
.form-service-provider-view {
  align-items: flex-start;
}
</style>

